<!--
 描述: 环形跑道图
 作者: Jack Chen
 日期: 2020-04-29
-->

<template>
  <div class="hbh-container">
    <commonTitle :title="'报警类型'" />
    <div class="mainBox">
      <div class="left-container">
        <div id="chart_run" style="width: 100%;height: 100%;"></div>
      </div>
      <div class="right-container">
        <div
          class="pdt-info"
          :class="`info${index}`"
          v-for="(item, index) in arrData"
          :key="index"
        >
          <span></span>
          <span>{{ item.name }}：</span>
          <span>{{ item.number }}</span>
          <span>（{{ item.percentage }}%）</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "callWarn",
  data() {
    return {
      option: null,
      arrData: [
        {
          name: "加热温度异常",
          number: 725,
          percentage: 41.5,
        },
        {
          name: "供水温度异常",
          number: 460,
          percentage: 30.95,
        },
        {
          name: "补水异常",
          number: 382,
          percentage: 22.48,
        },
        {
          name: "定时加热异常",
          number: 782,
          percentage: 22.48,
        },
      ],
    };
  },
  mounted() {
    this.getEchart();
  },
  methods: {
    getEchart() {
      // 初始化echarts实例
      let myChart = echarts.init(document.getElementById("chart_run"));
      let itemStyle = {
        normal: {
          color: "#444A51",
        },
      };

      this.option = {
        // color: ['#0772bb', '#00ffff', '#ffffff'],
        series: [
          {
            name: "加热温度异常",
            type: "pie",
            clockWise: true,
            startAngle: 90,
            hoverAnimation: false,
            radius: ["86%", "90%"],
            center: ["50%", "50%"],
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 5,
                name: "50%",
                itemStyle: {
                  normal: {
                    color: "#0772bb",
                  },
                },
              },
              {
                value: 5,
                name: "50%",
                itemStyle: itemStyle,
              },
            ],
          },
          {
            name: "供水温度异常",
            type: "pie",
            clockWise: true,
            startAngle: 90,
            hoverAnimation: false,
            radius: ["66%", "70%"],
            center: ["50%", "50%"],
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 100,
                name: "50%",
                itemStyle: {
                  normal: {
                    color: "#00ffff",
                  },
                },
              },
              {
                value: 15,
                name: "50%",
                itemStyle: itemStyle,
              },
            ],
          },
          {
            name: "补水异常",
            type: "pie",
            clockWise: true,
            startAngle: 90,
            hoverAnimation: false,
            radius: ["46%", "50%"],
            center: ["50%", "50%"],
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 1,
                name: "50%",
                itemStyle: {
                  normal: {
                    color: "#f48b3b",
                  },
                },
              },
              {
                value: 2,
                name: "50%",
                itemStyle: itemStyle,
              },
            ],
          },
          {
            name: "定时加热异常",
            type: "pie",
            clockWise: true,
            startAngle: 90,
            hoverAnimation: false,
            radius: ["26%", "30%"],
            center: ["50%", "50%"],
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 1,
                name: "50%",
                itemStyle: {
                  normal: {
                    color: "#F4D982",
                  },
                },
              },
              {
                value: 2,
                name: "50%",
                itemStyle: itemStyle,
              },
            ],
          },
        ],
      };

      // 使用制定的配置项和数据显示图表
      myChart.setOption(this.option, true);

      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.hbh-container {
  width: 100%;
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .mainBox {
    width: 100%;
    display: flex;
    align-items: center;
    .left-container {
      width: 40%;
      height: 300px;
    }
    .right-container {
      width: 60%;
      height: 300px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-right: 20px;
      box-sizing: border-box;
      .pdt-info {
        padding: 5px 10px;
        margin-bottom: 10px;
        white-space: nowrap;
        background-color: rgba(0, 0, 0, 0.4);
        &.info0 {
          span {
            &:nth-child(1) {
              background-color: rgb(0, 114, 188);
            }
          }
        }
        &.info1 {
          span {
            &:nth-child(1) {
              background-color: rgb(0, 255, 255);
            }
          }
        }
        &.info2 {
          span {
            &:nth-child(1) {
              background-color: rgb(255, 146, 50);
            }
          }
        }
        &.info3 {
          span {
            &:nth-child(1) {
              background-color: #f4d982;
            }
          }
        }
        > span {
          font-size: 12px;
          vertical-align: middle;
          &:nth-child(1) {
            margin-right: 6px;
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            // box-shadow: 0 0 2em, 0 0 4em, 0 0 6em, 0 0 8em, 0 0 10em,
            //   0 0 0 0.5em rgba(255, 255, 0, 0.1);
            text-decoration: underline;
            cursor: pointer;
            // &:hover {
            //   color: #00aeef;
            // }
          }
          &:nth-child(2) {
            font-family: Arial;
          }
        }
      }
    }
  }
}
</style>
